<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet"
    href="https://at.alicdn.com/t/c/font_4521547_hjtwflisp5.css?spm=a313x.manage_type_myprojects.i1.9.19013a81d8SiF8&file=font_4521547_hjtwflisp5.css">
<style>
    @charset"utf-8";

    .iconfont {
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -webkit-text-stroke-width: 0.2px;
        -moz-osx-font-smoothing: grayscale;
    }

    body {
        font-family: "microsoft yahei";
    }

    ul,
    li {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    a {
        text-decoration: none;
    }

    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    .order-evaluation {
        width: 827px;
        border: 2px solid #E84E40;
        background: #fff;
        z-index: 200;
        margin: 50px auto;
    }

    .order-evaluation {
        padding: 22px;
    }

    .order-evaluation h4 {
        font-size: 18px;
        color: #333333;
        padding-bottom: 20px;
        border-bottom: 1px dashed #dbdbdb;
    }

    .order-evaluation p {
        font-size: 14px;
        color: #999;
        line-height: 45px;
        margin-bottom: 0;
    }

    .order-evaluation .order-evaluation-text {
        font-size: 16px;
        color: #333;
        line-height: 40px;
        width: 809px;
        padding-left: 15px;
        background: #f3f3f3;
        margin-bottom: 25px;
        margin-top: 20px;
    }

    .order-evaluation-checkbox ul li {
        width: 142px;
        height: 43px;
        border: 1px solid #e8e8e8;
        text-align: center;
        background: #fff;
        font-size: 14px;
        color: #333333;
        line-height: 43px;
        margin-right: 25px;
        margin-bottom: 25px;
        float: left;
        cursor: pointer;
        overflow: hidden;
        position: relative;
    }

    .order-evaluation-checkbox ul li.checked i {
        display: block;
    }

    .order-evaluation-checkbox ul li.checked {
        border: 1px solid #e84c3d;
    }

    .order-evaluation .order-evaluation-textarea {
        position: relative;
        width: 784px;
        height: 210px;
    }

    .order-evaluation .order-evaluation-textarea textarea {
        width: 793px;
        height: 178px;
        border: 1px solid #e8e8e8;
        position: absolute;
        top: 0;
        left: 0;
        line-height: 22px;
        padding: 15px;
        color: #666;
    }

    .order-evaluation .order-evaluation-textarea span {
        position: absolute;
        bottom: 10px;
        font-size: 12px;
        color: #999;
        right: 10px;
    }

    .order-evaluation .order-evaluation-textarea span em {
        color: #e84c3d;
    }

    .order-evaluation>a {
        width: 154px;
        height: 48px;
        border-radius: 6px;
        display: block;
        text-align: center;
        line-height: 48px;
        background: #f36a5a;
        float: right;
        margin-top: 20px;
        color: #fff;
        font-size: 14px;
    }

    .order-evaluation-checkbox ul li i {
        display: none;
        color: #e84c3d;
        position: absolute;
        right: 0px;
        bottom: -10px;
        font-size: 20px;
    }

    .order-evaluation>a:hover {
        background: #e84c3d;
    }

    .block li label,
    .con span {
        font-size: 18px;
        margin-right: 20px;
        line-height: 23px;
    }

    .block li span {
        display: inline-block;
        vertical-align: middle;
        cursor: pointer;
    }

    .block li span img {
        margin-right: -5px;
    }

    .level {
        color: #e84c3d;
        font-size: 16px;
        margin-left: 15px;
        position: relative;
        top: 3px;
    }

    .dmlei_tishi_info {
        height: 70px;
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.5);
        font-size: 18px;
        color: #fff;
        text-align: center;
        line-height: 70px;
        position: fixed;
        left: 48%;
        display: none;
        margin-left: -128px;
        top: 40%;
        margin-top: -35px;
        padding: 0 15px;
        z-index: 1000;
    }
</style>

<body>
    <div id="app">
        <myorder></myorder>
    </div>
    <template id="orde">
        <div class="order-evaluation clearfix">
            <h4>给“新闻订单”的评价</h4>
            <p>请严肃认真对待此次评价哦！您的评价对我们真的真的非常重要！</p>
            <div class="block">
                <ul>
                    <li>
                        <span v-for="(item,index) in xing">
                            <img :src="item.checked?item.src2:item.src" @mouseover="hoverStar(index,true)"
                                @mouseout="hoverStar(index,false)">
                        </span>
                        <em class="level" v-for="(item,index) in ping" v-show="index === pinga">{{ item }}</em>
                    </li>
                </ul>
            </div>
            <div class="order-evaluation-text">
                本次交易，乖，摸摸头 给您留下了什么印象呢？
            </div>
            <div class="order-evaluation-checkbox">
                <ul class="clearfix">
                    <li class="order-evaluation-check" v-for="(item,index) in zi" :class="{checked:flag[index]}"
                        @click="flag[index] = !flag[index]">{{ item }}<i class="iconfont icon-check"></i>
                    </li>
                </ul>
            </div>
            <div class="order-evaluation-textarea">
                <textarea name="content" id="TextArea1" maxlength="140" v-model="legt"></textarea>
                <span>还可以输入<em id="textCount">{{ 140 - legt.length}}</em>个字</span>
            </div>
            <a href="javascript:;" id="order_evaluation" @click="deleitime">评价完成</a>
        </div>
        <div id="order_evaluate_modal" class="dmlei_tishi_info" :style="dmlei?{'display': 'block'}:{'display': 'none'}">
            感谢您的评价！么么哒(* ￣3)(ε￣*)
        </div>
    </template>
</body>
<script src="./vue.js"></script>
<script type="module">
    const { createApp, ref } = Vue
    import Myorder from './zuoye1.js'
    const app = createApp({})
    app.component('myorder', Myorder)
    app.mount("#app")
</script>

</html>